<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<!--直线命令-->
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500">
    <!--
    M：移动画笔
    H：水平移动
    V：垂直移动
    L：画直线
    Z：闭合
    -->
    <!--<path d="M100,100H200V200L100,200V100" stroke="red" fill="none"></path>-->
    <path d="M100,100H200V200L100,200Z" stroke="red" fill="none"></path>
</svg>
<!--曲线命令-->
<svg width="190px" height="160px" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <path d="M10 10 C 20 20, 40 20, 50 10" stroke="black" fill="transparent"></path>
    <path d="M70 10 C 70 20, 120 20, 120 10" stroke="black" fill="transparent"></path>
    <path d="M130 10 C 120 20, 180 20, 170 10" stroke="black" fill="transparent"></path>
    <path d="M10 60 C 20 80, 40 80, 50 60" stroke="black" fill="transparent"/>
    <path d="M70 60 C 70 80, 110 80, 110 60" stroke="black" fill="transparent"/>
    <path d="M130 60 C 120 80, 180 80, 170 60" stroke="black" fill="transparent"/>
    <path d="M10 110 C 20 140, 40 140, 50 110" stroke="black" fill="transparent"></path>
    <path d="M70 110 C 70 140, 110 140, 110 110" stroke="black" fill="transparent"></path>
    <path d="M130 110 C 120 140, 180 140, 170 110" stroke="black" fill="transparent"></path>
</svg>
<svg width="190px" height="160px" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="black" fill="transparent"></path>
</svg>
<svg width="190px" height="160px" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <path d="M10 80 Q 95 10 180 80" stroke="black" fill="transparent"></path>
</svg>
<svg width="190px" height="160px" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <path d="M10 80 Q 52.5 10, 95 80 T 180 80" stroke="black" fill="transparent"></path>
</svg>

<!--弧形-->
<svg width="320px" height="320px" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <path d="M10 315
           L 110 215
           A 30 50 0 0 1 162.55 162.45
           L 172.55 152.45
           A 30 50 -45 0 1 215.1 109.9
           L 315 10" stroke="black" fill="green" stroke-width="2" fill-opacity="0.5"></path>
</svg>
<svg width="325px" height="325px" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <!--
    A 指令参数A rx ry x-axis-rotation large-arc-flag sweep-flag x y解释
    rx x轴半径
    ry y轴半径
    x-axis-rotation 旋转角度
    large-arc-flag 选取的弧线小(0)大(1)
    sweep-flag 逆时针(0) 顺时针(1)
    x y 终点坐标
    -->
    <path d="M80 80
           A 45 45, 0, 0, 0, 125 125
           L 125 80 Z" fill="green"></path>
    <circle cx="125" cy="80" r="2" fill="red"></circle>
    <circle cx="80" cy="80" r="2" fill="red"></circle>
    <path d="M230 80
           A 45 45, 0, 1, 0, 275 125
           L 275 80 Z" fill="red"></path>
    <path d="M80 230
           A 45 45, 0, 0, 1, 125 275
           L 125 230 Z" fill="purple"></path>
    <path d="M230 230
           A 45 45, 0, 1, 1, 275 275
           L 275 230 Z" fill="blue"></path>
</svg>
</body>
</html>
